<template>
	<view class="moodpage">
		
		<view class="weekline">
			<view class="week">
				<picker  mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="picker">
						<view class="picker">{{date}} <view class="iconfont icon-xiangxiabeifen"></view></view>
						
					</view>
				</picker>
			</view>
		</view>
		
		<view class="pagetab">
			<view class="itempage" :class="page==1?'pageact':''" @click="selectpage(1)">
				压力
			</view>
			<view class="itempage" :class="page==2?'pageact':''" @click="selectpage(2)">
				情绪
			</view>
		</view>
		
		<view class="moodbox" v-if="page==2">
			<view class="left">
				<view class="moodtitle">
					平静
				</view>
				<view class="content">
					心情平和安静，未出现较大的情绪波动
				</view>
				<view class="label">
					更新时间 14:06
				</view>
			</view>
			<view class="iconfont icon-gaoxing">
				
			</view>
		</view>
		<view class="titlebox" v-if="page==1">
			<view class="toptitle">
				最新压力值: {{num}}
			</view>
			<view class="yalititle">
				压力监测
			</view>
			<view class="yalicontent">
				在App上绑定手边/手环设备，完成压力检测，设备即可智能检测压力状态，并且将数据同步到小程序，帮您有效管理压力。
			</view>
		</view>
		
		
		
		<view class="back" >
			<view class="datetab">
				<view class="itemdate " :class="tab=='day'?'act':''" @click="selecttab('day')">
					日
				</view>
				<view class="itemdate" :class="tab=='week'?'act':''" @click="selecttab('week')">
					周
				</view>
				<view class="itemdate" :class="tab=='month'?'act':''" @click="selecttab('month')">
					月
				</view>
			</view>
		</view>
		
		<view class="chartbox"v-show="page==1">
			<view class="charttile">
				压力走势
			</view>
			<view class="chart">
				<l-echart ref="chart1"></l-echart>
			</view>
		</view>
		
	   <view class="box" v-if="page==1">
	   	  <view class="boxtitle">
	   	  	压力分析
	   	  </view>
		  <view class="dataline">
		  	<view class="itemdata">
		  		<view class="num">
		  			46 <view class="danwei">
		  				正常
		  			</view>
		  		</view>
				<view class="label">
					平均值
				</view>
		  	</view>
			<view class="itemdata">
				<view class="num">
					41-51
				</view>
				<view class="label">
					压力范围
				</view>
			</view>
		  </view>
	   </view>
	   <view class="foottitle">
	   	关于压力
	   </view>
	   <view class="footbox">
	   	压力指的是个体在面对挑战，需求或者变化是所感受到的精神和情绪上的紧张状态。适当的压力有助于提高工作学习效率，
		长期的高压状态可能导致焦虑，抑郁，身体不适等问题，设备通过测量HRV心率变异性来检测压力，有助于您的调节和管理压力，让您保持心理健康
	   </view>
	   <view class="footbtn">
	   	 测量压力
	   </view>
		
		
	</view>
</template>

<script>
	import lEchart from '../../pagesO/components/lime-echart/components/l-echart/l-echart.vue'
	export default {
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				tab:'day',
				date:currentDate,
				page:1,
				num:6,
			}
		},
		components:{
		lEchart	
		},
		computed: {
		    startDate() {
		        return this.getDate('start');
		    },
		    endDate() {
		        return this.getDate('end');
		    },
			
		},
		mounted() {
		 this.initChart1()
		},
		methods: {
			selectpage(e){
				this.page=e
			},
			initChart1() {
					let option = {
						color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE'],
				
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								label: {
									backgroundColor: '#283b56'
								}
							}
						},
						legend: {
							top:0
						},
						grid: {
							bottom: 10,
							left: 0,
							right: 20,
							containLabel: true
						},
						xAxis: [{
							type: 'category',
							data: [1,2,3,4,5,6,7],
							axisLine: {
								lineStyle: {
									color: '#999999'
								}
							},
							axisLabel: {
								color: '#666666'
							}
						}],
						yAxis: [{
							type: 'value',
							// 格式化标签，只显示整数
							axisLabel: {
								color: '#666666',
								formatter: function(value) {
									
									return Math.round(value);
								}
							}
						}],
						
						series:[
							{
								type:'line',
								data:[10,11,12,12,13,14,15]
							}
						]
						
					}
			     
					this.$nextTick(() => {
						this.$refs.chart1.init(this.$echarts, chart1 => {
							chart1.setOption(option);
						});
					})
					},
			getDate(type) {
			           const date = new Date();
			           let year = date.getFullYear();
			           let month = date.getMonth() + 1;
			           let day = date.getDate();
			
			           if (type === 'start') {
			               year = year - 10;
			           } else if (type === 'end') {
			               year = year + 10;
			           }
			           month = month > 9 ? month : '0' + month;
			           day = day > 9 ? day : '0' + day;
			           return `${year}-${month}-${day}`;
			       },
					
		}
	}
</script>

<style  lang="less" scoped>
.moodpage{
	width: 750rpx;
	box-sizing: border-box;
	background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(242,248,255,1) 100%);
	padding-bottom: 200rpx;
	.weekline{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
		background-color: white;
		.week{
			margin: 0 30rpx;
			font-weight: bold;
			color: #1A4F8A;
			font-size: 32rpx;
			font-family: OPPOSans-black;
			display: flex;
			align-items: center;
			.picker{
				display: flex;
				align-items: center;
				position: relative;
			}
			.iconfont{
				color:#5c6fac;
				
			}
		}
		
	}
	
	.pagetab{
		width: 90%;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
			border-radius: 20rpx;
			background-color: white;
			color: #999999 ;
		.itempage{
			width: 50%;
			height: 70rpx;
			text-align: center;
			border-radius: 20rpx;
			line-height: 70rpx;
		}
		.pageact{
			background-color: #3ec3ca;
			color: white;
		}
		
	}
	
	.moodbox{
		width: 94%;
		margin:50rpx auto;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		background-color: #f6ffe0;
		box-sizing: border-box;
		padding: 20rpx;
		
		.left{
			width: 65%;
			line-height: 1.9;
			.moodtitle{
				font-size: 36rpx;
				font-weight: bold;
				color: #7a9532;
			}
			.content{
				font-size: 28rpx;
				color: gray;
			}
			.label{
				font-size: 26rpx;
				color: #999999;
			}
		}
		.iconfont{
			font-size: 80rpx;
			font-weight: bold;
			color: #7a9532;
		}
		
	}
	.titlebox{
		width: 92%;
		background-color: white;
		margin: 30rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		.toptitle{
			line-height: 2.2;
			text-align: center;
			color: gray;
		}
		.yalititle{
			font-weight: bold;
			margin: 20rpx;
		}
		.yalicontent{
			font-size: 28rpx;
			color: gray;
			box-sizing: border-box;
			padding: 20rpx;
		}
		
		
	}
	.back{
		width: 100%;
		height: 120rpx;
		
		.datetab{
			width: 90%;
			height: 110rpx;
			display: flex;
			box-sizing: border-box;
			padding: 10rpx;
			border-radius: 20rpx;
			margin: auto;
			background-color: #F4F4F4 ;
			color:#656565  ;
			line-height: 90rpx;
			.itemdate{
				width:33%;
				height: 100%;
				text-align: center;
				border-radius: 20rpx;
			}
			.act{
				background-color: white;
				font-weight: bold;
				color: #494949 ;
			}
			
		}
	}
	
	.chartbox{
		background-color: white;
			   width: 94%;
			   margin: 40rpx auto;
			   background: white;
			   border-radius: 20rpx;
			   box-sizing: border-box;
			   padding: 20rpx;
			   height: 800rpx;
			   .charttitle{
				   font-weight: bold;
			   }
			   .chart{
				   width: 100%;
				   height: 700rpx;
			   }
			   
	}
	.box{
		background-color: white;
			   width: 94%;
			   margin: 40rpx auto;
			   background: white;
			   border-radius: 20rpx;
			   box-sizing: border-box;
			   padding: 20rpx;
			   height: 800rpx;
			   .boxtitle{
			   				   font-weight: bold;
			   }
			   .dataline{
				   width: 100%;
				   display: flex;
				   align-items: center;
				   .itemdata{
					   width: 50%;
					   line-height: 2.2;
					   font-weight: bold;
					   .num{
						   display: flex;
						   align-items: center;
						   .danwei{
							   font-size: 26rpx;
							   color: gray;
							   margin-left: 20rpx;
						   }
					   }
				   }
			   }
	}
	.foottitle{
		font-weight: bold;
		font-size: 34rpx;
		margin: 20rpx;
	}
	.footbox{
		width: 94%;
		margin: auto;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		color: gray;
	}
	.footbtn{
		width: 90%;
		height: 80rpx;
		margin:50rpx auto;
		text-align: center;
		line-height: 80rpx;
		color: white;
		background-color: #1A4F8A;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-weight: bold;
	}
	
}
</style>
